import React, { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import axios from 'axios'
import styles from './detail.module.css'
const Index = () => {
    let Params = useParams()
    const [detail, setDetail] = useState([])
    const [tracks, setTracks] = useState([])
    const getDetail = async (id) => {
        var res = await axios.get(`http://122.112.161.135:3000/playlist/detail?id=${id}`)
        if (res.data.playlist) {
            setDetail(res.data.playlist)
            console.log(res.data.playlist);
            setTracks(res.data.playlist.tracks)
        }
    }
    const handleTime = (dt) => {
        var seconds = dt / 1000
        var mintues = seconds / 60
        mintues = mintues.toFixed(2)
        if(mintues<10){
            mintues='0'+mintues
        }
        return mintues
    }
    useEffect(() => {
        var { id } = Params
        getDetail(id)
    },[]);
    return (
        <div className={styles.page}>
            <img src={detail.coverImgUrl} className={styles.pic} alt="" />
            <p>{detail.name}</p>
            <div>
                {tracks.map(item => {
                    return (
                        <div key={item.id} className={styles.item}>
                            <img src={item.al.picUrl} className={styles.img} alt="" />
                            <div className={styles.de}>
                                <p>{item.name}</p>
                                <p>{item.ar[0].name}</p>
                                <p>{handleTime(item.dt)}分钟</p>
                            </div>
                        </div>
                    )
                })}
            </div>
        </div>
    );
}

export default Index;
